<div class="crayons-layout crayons-layout--limited-l gap-0">
  <div class="crayons-card crayons-card--secondary text-styles text-styles--secondary text-padding -mb-1 mx-3 m:mx-6 mt-3">
    <%= truncate(sanitize(@comment.processed_html, tags: []), length: 200) %>
  </div>
  <div class="crayons-card text-padding">
    <h1 class="crayons-subtitle-1 mb-2"><%= t("views.comments.delete.heading") %></h1>
    <p class="fs-l mb-4">
      <%= t("views.comments.delete.desc_html", action: link_to(t("views.comments.delete.action"), "#{@comment.path}/edit", data: { no_instant: "" })) %>
    </p>

    <%= form_tag "/comments/#{@comment.id}", method: :delete do %>
      <button class="crayons-btn crayons-btn--danger"><%= t("views.comments.delete.submit") %></button>
      <a data-no-instant href="<%= @comment.path %>/edit" class="crayons-btn crayons-btn--secondary"><%= t("views.comments.delete.edit") %></a>
      <a data-no-instant href="<%= @comment.path %>" class="crayons-btn crayons-btn--ghost"><%= t("views.comments.delete.cancel") %></a>
    <% end %>
  </div>
</div>
